@import '../../common';

.ask-container {
  box-sizing: border-box;
  padding: 26rpx 24rpx 32rpx 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;

  .question,
  .answer {
    display: flex;

    .img {
      @include size(62, 62);
      position: relative;

      text {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        @include size(32, 32, 8rpx);
        @include fontStyle(22, 22, #FFFFFF);
        @include flex-center;
      }

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .content {
      width: calc(100% - 62rpx);
      box-sizing: border-box;
      padding-left: 32rpx;
      padding-top: 6rpx;
    }
  }

  .question {
    @include fontStyle(32, 48, #000000, 500);

    image {
      position: relative;
      border-radius: 50%;
    }
  }

  .answer {
    margin-top: 22rpx;
    @include fontStyle(28, 42, #666666);

    .img {
      position: relative;

      image {
        border-radius: 50%;
      }

      text {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        @include size(32, 32, 8rpx);
        @include fontStyle(22, 22, #FFFFFF);
        @include flex-center;
      }
    }
  }

  .num {
    @include flex;
    margin-top: 40rpx;
    box-sizing: border-box;
    padding-left: calc(62rpx + 32rpx);

    text {
      @include fontStyle(24, 24, var(--color-theme));

    }

    .icon {
      width: 24rpx;
      height: 24rpx;
      position: relative;

      .icon_1,
      .icon_2 {
        position: absolute;
        width: 16rpx;
        height: 2rpx;
        background-color: var(--color-theme);
        position: absolute;
        top: 50%;
        left: 50%;
      }

      .icon_1 {
        transform: translate(-50%, -50%) rotate(45deg);
        margin-top: -5rpx;
      }

      .icon_2 {
        transform: translate(-50%, -50%) rotate(-45deg);
        margin-top: 5rpx;
      }
    }

    image {
      @include size(24, 24)
    }
  }
}